<template>
  <div class="storeInfo" :style="{minHeight:$store.state.minHeight+'rem'}">
    <myHead title="店铺管理" background-color="linear-gradient(170deg,rgba(251,68,72,1) 0%,rgba(254,111,77,1) 100%)"></myHead>
    <div class="top">
      <div class="info">
        <div class="infoImg">
          <img :src="$store.state.imgurlApi+store_info.avatar" alt="">
        </div>
        <div class="infoName">
          {{config_info[0].value}}
        </div>
      </div>
      <div class="statue">
        <div class="title">店铺状态</div>
        <van-switch v-model="checked" active-color="#FB4448" @change="statue()" />
      </div>
      <div class="statue">
        <div class="title">自动接单</div>
        <van-switch v-model="self_motion_val" active-color="#FB4448" @change="self_motion()" />
      </div>
    </div>
    <div class="list">
      <div class="list_once" @click="edit('店铺名称',config_info[0].value,config_info[0].config_id)">
        <div class="title">店铺名称</div>
        <div class="content">{{config_info[0].value}}</div>
        <van-icon name="arrow" color="#999999" size="17" />
      </div>
      <div class="list_once" @click="time()">
        <div class="title">营业时间</div>
        <div class="content">{{config_info[4].value}}~{{config_info[5].value}}</div>
        <van-icon name="arrow" color="#999999" size="17" />
      </div>
      <div class="list_once" @click="edit('联系电话',config_info[2].value,config_info[2].config_id)">
        <div class="title">联系电话</div>
        <div class="content">{{config_info[2].value}}</div>
        <van-icon name="arrow" color="#999999" size="17" />
      </div>
      <div class="list_once" @click="edit('地址',config_info[7].value,config_info[7].config_id)">
        <div class="title">地址</div>
        <div class="content">{{config_info[7].value}}</div>
        <van-icon name="arrow" color="#999999" size="17" />
      </div>
    </div>
    <van-dialog v-model="show" :title="title" confirmButtonColor="#FB4448" cancelButtonColor="#333333" show-cancel-button @confirm="submit()">
      <input class="dialog" :name="name" type="text" :placeholder="placeholder" v-model="value" />
    </van-dialog>
    <van-dialog v-model="showTime" title="营业时间" confirmButtonColor="#FB4448" cancelButtonColor="#333333" show-cancel-button @confirm="timeArry()">
      <div class="to">到</div>
      <van-picker show-toolbar :columns="columns" ref="Picker" />
    </van-dialog>
  </div>
</template>

<script>
  import myHead from "../../components/BusinessComponents/lib/myHead";
  import Vue from 'vue';
  import { Switch,Icon,Dialog,Picker } from 'vant';

  Vue.use(Switch);
  Vue.use(Icon);
  Vue.use(Dialog);
  Vue.use(Picker);

  export default {
      name: "storeInfo",
      components: {
        myHead
      },
      data() {
        return {
          checked: true,
          show: false,
          showTime: false,
          self_motion_val:false,
          currentTime: '12:00',
          name:"",
          title:"",
          placeholder:"",
          columns: [
            // 第一列
            {
              values: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
              defaultIndex: 2,
            },
            // 第二列
            {
              values: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
              defaultIndex: 1,
            },
          ],
          store_info:{},
          config_info:[],
          config_id:0,
          value:"",
        };
      },
      methods: {
        edit:function (title,placeholder,config_id) {
          this.title = title;
          this.placeholder = placeholder;
          this.config_id = config_id;
          this.show = true;
        },
        statue:function(){
          console.log(this.checked);
          let statue = "0";
          if(this.checked){
            statue = "1"
          }
          this.post(13,statue)
        },
        self_motion:function(){
          console.log(this.self_motion_val);
          let self_motion = "no";
          if(this.self_motion_val){
            self_motion ='yes'
          }
          this.$myAxios('index/Order/self_motion', 'post', {
            mid:this.store_info.id,
            self_motion:self_motion
          }).then(res => {
            console.log(res.data.state);
            if(res.data.state == 1){
              console.log(res.data.manystore);
              if(res.data.manystore.self_motion == "yes"){
                this.self_motion = true
              }
            }else{
              this.$myNotice('网络中断，刷新重试',1500)
            }
          });
        },
        time:function () {
          this.showTime = true;
        },
        timeArry:function(){
          this.post(5,this.$refs.Picker.getValues()[0]);
          this.post(6,this.$refs.Picker.getValues()[1]);
        },
        submit:function () {
          this.post(this.config_id,this.value);
        },
        post:function (config_id,value) {
          this.$myAxios('/store/index/edit_store_config_info', 'post', {
            config_id:config_id,
            manystore_id:this.store_info.id,
            value:value
          }).then(res => {
            this.$myNotice(res.data.msg,2000);
            if(res.data.code==1){
              // console.log(this.config_info[this.config_id-1]);
              this.config_info[config_id-1].value = value;
              this.value ="";
              this.$myAxios('/store/index/info', 'get', {
                store_id:this.store_info.id
              }).then(res => {
                localStorage.setItem("storeInfo",JSON.stringify(res.data.data.store_info));
                localStorage.setItem("configInfo",JSON.stringify(res.data.data.config_info));
              })
            }
          })
        }
      },
      mounted() {
        this.store_info = JSON.parse(localStorage.getItem("storeInfo"));
        this.config_info = JSON.parse(localStorage.getItem("configInfo"));
        if(this.config_info[12].value == "1"){
          this.checked = true
        }else{
          this.checked = false
        }
        this.$myAxios('index/Order/self_motion_check', 'post', {
          mid:this.store_info.id,
        }).then(res => {
          console.log(res.data.state);
          if(res.data.state == 1){
            console.log(res.data.manystore);
            if(res.data.manystore.self_motion == "yes"){
              this.self_motion_val = true
            }else{
              this.self_motion_val = false
            }
          }else{
            this.$myNotice('网络中断，刷新重试',1500)
          }
        });
        console.log(this.store_info);
      }
  }
</script>

<style scoped>
  .storeInfo{
    background: #F5F5F5;
  }
  >>>.van-switch{
    font-size: .3rem;
  }
  >>>.van-dialog__header{
    line-height:.24rem;
    padding-top:.24rem;
  }
  >>>.van-dialog__content{
    margin: .16rem .12rem .23rem;
  }
  >>>.van-dialog{
    width: 3.2rem;
    font-size: .16rem;
    border-radius:.16rem;
  }
  >>>.van-button{
    font-size: .16rem;
    height: .5rem;
    line-height: .48rem;
  }
  >>>.van-picker__toolbar{
    display: none;
  }
  >>>.van-picker-column{
    font-size: .16rem;
  }
  >>>.van-picker-column__item{
    height: .44rem !important;
  }
  .dialog{
    width: calc(100% - 0.18rem);
    height: .36rem;
    border: none;
    background: #F6F6F6;
    border-radius: .08rem;
    padding: 0 .09rem;
    font-size: .14rem;
  }
  .to{
    position: absolute;
    z-index: 9;
    width: calc(100% - .24rem);
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    font-size: .15rem;
  }
  .top{
    padding: .63rem .13rem .12rem;
    background-color: #ffffff;
  }
  .info{
    display: flex;
    border-bottom: 1px solid #F6F6F6;
    padding-bottom: .13rem;
    margin-bottom: .13rem;
  }
  .infoImg{
    width: .48rem;
    height: .48rem;
    margin-right: .11rem;
    border-radius: .04rem;
    overflow: hidden;
  }
  .infoName{
    font-size: .15rem;
    color: #333333;
    font-weight: bold;
    line-height: .48rem;
  }
  .statue{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .1rem;
  }
  .title{
    font-size: .14rem;
  }
  .list{
    background: #ffffff;
    margin-top: .12rem;
  }
  .list_once{
    display: flex;
    padding: .18rem .2rem;
    align-items: center;
  }
  .content{
    flex-grow: 1;
    text-align: right;
    font-size: .14rem;
    color: #A5A5A5;
    margin-right: .04rem;
  }
</style>
